import {
  createRouter,
  createWebHashHistory
} from 'vue-router';
import {
  ref
} from 'vue';

export const transitionName = ref('slide-right');

const routes = [{
    path: '/',
    name: 'home',
    redirect:'rpt-ct',
    meta: {
      pageType: "tab",
      index: 49
    },
    component: () => import('../pages/home/index.vue'),
  },
  {
    path: '/about',
    name: 'about',
    meta: {
      pageType: "tab",
      index: 4
    },
    component: () => import('../pages/about/index.vue'),
  },
  {
    path: '/login',
    name: 'login',
    meta: {
      pageType: "tab",
      index: 50
    },
    component: () => import('../pages/login/index.vue'),
  },
  {
    path: '/rpt-ls',
    name: 'rpt-ls',
    meta: { pageType: "tab", index: 40 },
    component: () => import('../pages/rpt-ls/index.vue'),
  },{
    path: '/rpt-ct',
    name: 'rpt-ct',
    meta: { pageType: "tab", index: 40 },
    component: () => import('../pages/rpt-ct/index.vue'),
  },

  {
    path: '/cargo-tracking',
    name: 'cargo-tracking',
    meta: { pageType: "tab", index: 30 },
    component: () => import('../pages/cs-rt/cargo-tracking/index.vue'),
  },{
    path: '/delivery-supervision',
    name: 'delivery-supervision',
    meta: { pageType: "tab", index: 30 },
    component: () => import('../pages/cs-rt/delivery-supervision/index.vue'),
  },{
    path: '/logistics-schedule',
    name: 'logistics-schedule',
    meta: { pageType: "tab", index: 30 },
    component: () => import('../pages/cs-rt/logistics-schedule/index.vue'),
  },{
    path: '/node-progress',
    name: 'node-progress',
    meta: { pageType: "tab", index: 30 },
    component: () => import('../pages/cs-rt/node-progress/index.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory(), // hash路由模式
  // history: createWebHistory(),  // history路由模式
  routes,
  scrollBehavior (to, from, savedPosition) {
    // 滚动到顶部
    return { top: 0 }
  }
});


router.beforeEach((to, from) => {
  if (from.meta.pageType == "tab" && to.meta.pageType != "tab") {
    transitionName.value = 'slide-right';
    return;
  }

  if (from.meta.pageType != "tab" && to.meta.pageType == "tab") {
    transitionName.value = 'slide-left';
    return;
  }

  if ((from.meta.pageType == "tab" && to.meta.pageType == "tab") || (from.meta.pageType != "tab" && to.meta.pageType != "tab")) {
    if (to.meta.index > from.meta.index) {
      // 从右往左动画
      transitionName.value = 'slide-left';
    } else if (to.meta.index < from.meta.index) {
      // 从左往右动画
      transitionName.value = 'slide-right';
    } else {
      transitionName.value = '';
    }
  }
})

export default router;